import 'dart:ui';

import 'package:day_demo/src/square/square_heading/org_square_editing_heading_widget.dart';
import 'package:day_demo/src/square/widgets/clearable_texfield.dart';
import 'package:day_demo/src/square/widgets/num_radius.dart';
import 'package:flutter/material.dart';

class SquareConsumerHotlineWidget extends StatefulWidget {
  const SquareConsumerHotlineWidget({super.key});

  @override
  State<SquareConsumerHotlineWidget> createState() =>
      _SquareConsumerHotlineWidgetState();
}

class _SquareConsumerHotlineWidgetState
    extends State<SquareConsumerHotlineWidget> {
  @override
  Widget build(BuildContext context) {
    var childTop = ClipRect(
        child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
            child: GestureDetector(
              onTap: () {
                Navigator.of(context).pop();
              },
              behavior: HitTestBehavior.translucent,
              child: Container(
                height: MediaQuery.of(context).padding.top + 90,
              ),
            )));
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Column(
        children: [
          childTop,
          Expanded(
            child: GestureDetector(
              onTap: () {
                SystemUtils.hideSoftKeyboard(context);
              },
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: 8.only(topRight: true, topLeft: true),
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    header(context),
                    Container(
                      height: 12,
                      color: Color(0xFFF5F8FE),
                    ),
                    Flexible(child: InputConsumerHotlineContianer()),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget header(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 16),
      child: Row(
        children: [
          TextButton(onPressed: () {}, child: Text('取消')),
          Expanded(
            child: Center(
              child: Text('客服电话'),
            ),
          ),
          TextButton(onPressed: () {}, child: Text('保存')),
        ],
      ),
    );
  }
}

class InputConsumerHotlineContianer extends StatefulWidget {
  const InputConsumerHotlineContianer({super.key});

  @override
  State<InputConsumerHotlineContianer> createState() =>
      _InputConsumerHotlineContianerState();
}

class _InputConsumerHotlineContianerState
    extends State<InputConsumerHotlineContianer> {
  List<ConsumerHotlineItemWidget> items = [];
  ScrollController controller = ScrollController();
  @override
  void initState() {
    items.add(ConsumerHotlineItemWidget());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        TextButton(
            onPressed: () {
              items.removeLast();
              setState(() {});
              WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
                controller.jumpTo(
                  controller.position.maxScrollExtent,
                );
              });
            },
            child: Text('删除')),
        TextButton(
            onPressed: () {
              items.add(ConsumerHotlineItemWidget());
              setState(() {});
              WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
                controller.animateTo(
                  controller.position.maxScrollExtent,
                  duration: const Duration(milliseconds: 200),
                  curve: Curves.easeOutQuart,
                );
              });
            },
            child: Text('添加')),
        Flexible(
          child: SingleChildScrollView(
            physics: const ClampingScrollPhysics(),
            controller: controller,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                ...items,
              ],
            ),
          ),
        ),
      ],
    );
  }
}

class ConsumerHotlineItemWidget extends StatefulWidget {
  const ConsumerHotlineItemWidget({super.key});

  @override
  State<ConsumerHotlineItemWidget> createState() =>
      _ConsumerHotlineItemWidgetState();
}

class _ConsumerHotlineItemWidgetState extends State<ConsumerHotlineItemWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin: const EdgeInsets.symmetric(horizontal: 16),
      padding: const EdgeInsets.symmetric(vertical: 12),
      alignment: Alignment.centerLeft,
      decoration: const BoxDecoration(
        color: Colors.white,
        border: Border(bottom: BorderSide(width: 1, color: Color(0xFFECEFF5))),
      ),
      child: Container(
        color: Colors.white,
        alignment: Alignment.centerLeft,
        child: Row(
          children: [
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text('+86'),
                SizedBox(
                  width: 16,
                ),
                Icon(
                  Icons.keyboard_arrow_down_outlined,
                  size: 24,
                ),
              ],
            ),
            SizedBox(
              width: 16,
            ),
            Container(
              height: 16,
              width: 1,
              color: Color(0xFFECEFF5),
            ),
            SizedBox(
              width: 16,
            ),
            Expanded(
              child: IQClearTexField(
                contentPadding: const EdgeInsets.only(
                    left: 0, right: 0, top: 12, bottom: 12),
              ),
            ),
            SizedBox(
              width: 16,
            ),
            Icon(
              Icons.add_circle_outlined,
              size: 24,
            ),
          ],
        ),
      ),
    );
  }
}
